<template>
<div id="cmds-panel">
  <div>
    <div class="close-div">    
      <CloseBold style="width: 1em; height: 1em;" @click="$emit('close')" />
    </div>
    <div class="buttons-div">
      <div v-for="item in btnArr" :key="item" class="btn">
        <el-button
            type="primary"
            @click="genForm(item)"
            :title="btnDict[item]['cmdName']"
        >
          {{ btnDict[item]['cmdName'] }}
        </el-button>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="isShowForm"
    :modal="false"
    width="500"
    :before-close="closeForm"
  >
    <DynamicForm ref="dynamicRef" @close="isShowForm=false"></DynamicForm>
  </el-dialog>
</div>
</template>

<script setup>
import { ref, computed, watch, onBeforeUnmount, nextTick } from 'vue'
import { CloseBold} from '@element-plus/icons-vue'
import { useTcStore } from '@/stores/tc-module.js'
import DynamicForm from './DynamicForm.vue';

const tcStore = useTcStore()
const btnArr = computed(() => tcStore.selNodeArr)
const btnDict = computed(() => tcStore.cmdObj)
let isShowForm = ref(false)
const dynamicRef = ref(null)

watch(isShowForm, (newVal) => {
  nextTick(() => {
    if (newVal) {
      dynamicRef.value.initForm()
    }
  })
})
onBeforeUnmount(() => {
  tcStore.clearSendTdFormFull()
})
const genForm = (id) => {
  tcStore.setSelCmd(id)
  isShowForm.value = true
}

const closeForm = () => {
  //dynamicRef.value.resetForm()
  isShowForm.value = false
}
</script>

<style lang="scss" scoped>
.close-div{
  float: right;
  padding: 10px 10px 0 0;
}
.close-div :hover{
  cursor: pointer;
}
.buttons-div {
  padding: 10px 0 10px 10px;
}
.buttons-div .btn {
  padding: 5px 0 5px 0;
}
.buttons-div .btn .el-button {
  width: 300px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
  display: inline-block; /* 让文本与 overflow 一起工作 */
}
.el-button>span {
  display: inline !important; /* 强制显示 span 标签 */
}
</style>
